<template>
  <div class="scaleList">
    <basic-container>
      <avue-crud
        :option="option"
        :data="data"
        ref="crud"
        @selection-change="selectionChange"
        @on-load="onLoad"
        v-model="item"
        @search-change="searchGridInfo"
        :search.sync="search"
        @refresh-change="onLoad"
      >
        <template slot="menuLeft" slot-scope="{ size }">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-plus"
            @click="dialogTableVisible = true"
            >添加绑定量表</el-button
          >
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            plain
            @click="deleteInfo"
            >删除绑定量表
          </el-button>
          <el-dialog
            title="量表列表"
            :visible.sync="dialogTableVisible"
            class="dialogInfoCss"
          >
            <scaleDialog
              :gaugeIdList="gaugeIdList"
              @onloadInfo="searchChange"
              @close="closeDialog"
            ></scaleDialog>
          </el-dialog>
        </template>

        <template slot-scope="{ type, size, row }" slot="menu">
          <el-button
            icon="el-icon-check"
            :size="size"
            :type="type"
            @click="handlePreview(row)"
            >预览
          </el-button>
        </template>
      </avue-crud>
    </basic-container>
    <QuestionPreview
      :gaugeId="gaugeId"
      :visible.sync="questionPreviewVisible"
    ></QuestionPreview>
  </div>
</template>

<script>
import {
  deleteProjectgaugerelation,
  getProjectgaugerelation,
} from "@/api/census/scale";
import scaleDialog from "./scaleDialog";
import QuestionPreview from "./question-preview.vue";

export default {
  name: "scaleList",
  components: { scaleDialog, QuestionPreview },
  data() {
    return {
      item: {},
      dialogTableVisible: false,
      questionPreviewVisible: false,
      search: {},
      gaugeId: "",
      gaugeIdList: [],
      selectionList: [],
      promote: true,
      option: {
        addBtnText: "添加量表",
        addBtn: false,
        excelBtn: false,
        delBtn: false,
        border: true,
        index: true,
        selection: true,
        editBtn: false,
        expandLevel: 3,
        headerAlign: "left",
        align: "left",
        tree: false,
        labelWidth: 100,
        menuWidth: 180,
        column: [
          {
            width: 130,
            label: "编码",
            prop: "gaugeNo",
          },
          {
            label: "量表类别",
            prop: "gaugeTypeId",
            type: "select",
            searchSpan: 8,
            search: true,
            props: {
              label: "typeName",
              value: "gaugeTypeId",
            },
            dicUrl: `/api/blade-measure/measure/gaugetype/listAll`,
          },
          {
            label: "量表名",
            prop: "title",
            searchSpan: 8,
            search: true,
          },
        ],
      },
      data: [],
      query: {},
    };
  },
  computed: {
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.projectGaugeRelationId);
      });
      return ids.join(",");
    },
  },
  methods: {
    async onLoad(page = this.page, params = {}) {
      //模拟分页
      // this.page.total = 40;
      params.projectId = this.$route.query.projectId;

      const {
        data: { data },
      } = await getProjectgaugerelation(
        1,
        100,
        Object.assign(params, this.query)
      );
      this.data = data.records;
      this.gaugeIdList = data.records.map((v) => {
        return v.gaugeId;
      });
      console.log(this.gaugeIdList);
      // this.page.total = data.total;
    },

    async deleteInfo() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return deleteProjectgaugerelation({ ids: this.ids });
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.$refs.crud.toggleSelection();
        });
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    closeDialog() {
      this.dialogTableVisible = false;
    },
    handlePreview(row) {
      this.gaugeId = row.gaugeId;
      this.questionPreviewVisible = true;
    },
    async searchGridInfo(params, done) {
      await this.onLoad(this.page, params);
      done();
    },
    searchChange() {
      this.onLoad(this.page);
    },
  },
};
</script>

<style lang="scss" scoped>
.dialogInfoCss {
  overflow-y: hidden;
  margin-top: -80px;
  // margin-bottom: 40px;
}
</style>
